<template>
	<view class="m-tag" :class="['m-tag--'+ type,]" :style="[boxStyle,fontStyle]" @click="clickHandle">
		<template v-if="text">
			<text class="tag-text" >{{text}}</text>
		</template>
		<template v-else>
			<slot></slot>
		</template>
	</view>
</template>

<script>
	import mixin from "../../libs/mixin/mixin.js"
	export default {
		mixins: [mixin],
		name: "m-button",
		props: {
			text: {
				type: String,
				default: '',
			},
			type: {
				type: String,
				default: 'theme',
			},
			hollow: {
				type: Boolean,
				default: false,
			},
			gap: {
				default: '3 8',
				type: String,
			},
			border:{
				type: String,
				default: '0',
			},
			ftsize: {
				type: String,
				default: '24',
			},
			bordercolor: {
				type: String,
				default: '',
			},
			radius: {
				type: String,
				default: '8',
			},
		},
		computed: {
			colorType() {
				return {
					'theme': 'var(--theme)',
					'success': 'var(--success)',
					'warning': 'var(--warning)',
					'error': 'var(--error)',
					'disabled': 'var(--disabled)',
				} [this.type] || ''
			},

			boxStyle() {
				const style = {
					...this.style,
					'border-color': this.bgColor  ||  this.bordercolor  || this.colorType,
					"background": this.hollow ? "unset" : this.bgColor || this.colorType,
				}
				if(this.hollow){
					style.border = '1'
				}
				return style
			},
			fontStyle() {
				
				const fts = {
					'fontSize': this.ftsize + 'rpx',
					'fontWeight': this.weight,
					'color':this.color? this.color:this.hollow ? this.bgColor : this.color,
				}
				if (this.loading) {
					fts.color = this.colorType
				}
				return fts
			},
		},
		mounted() {
		},
		methods: {

		}
	}
</script>

<style lang="scss">
	.m-tag {
		display: inline-flex;
		align-items: center;
		position: relative;
		border-radius: var(--m_btn_rad);
		// transition: all .2s;


		.block-text {
			font-size: 30rpx;
			font-family: PingFang SC;
			font-weight: 600;
			color: #333333;
		}


		&--theme {
			border: 1px solid var(--theme);
			color: var(--text_Whi);
			background: var(--theme);
		}

		//默认色
		&--default {
			border: 1px solid var(--defalut);
			background: unset;
			color: var(--text);
		}


		&--success {
			background: var(--success);
			color: var(--text_Whi)
		}

		&--warning {
			background: var(--warning);
			color: var(--text_Whi)
		}

		&--error {
			background: var(--error);
			color: var(--text_Whi)
		}


		&--disabled {
			background: var(--btn_disabled);
			color: var(--text_6);
		}

		&--s {
			font-size: var(--fs_24);
			padding: var(--m_pad10) 30rpx;
			display: inline-flex;
		}

		&--l {
			width: 100%;
			font-size: var(--fs_24);
			display: inline-flex;
		}
	}
</style>